<template>
  <div class="invite-item" :style="line ? '' : 'border:none'">
    <div class="invite-top">
      <div class="invite-item-left" :style="'padding-top:' + pt + 'px'">
        <div class="invite-title line1" @click="detail">
          <tag-view :item="source"></tag-view>
          <!-- 【周末双休】大数据开发工程师 -->
          {{ source.title }}
        </div>
        <div class="tag-list" v-if="source.fringeBenefits">
          <template>
            <div
              class="tag-item"
              v-for="item2 in source.fringeBenefits.split(',')"
              :key="item2"
            >
              {{ item2 }}
            </div>
          </template>
        </div>
        <div class="invite-user">
          <img
            @click.stop="agentDetailNew(source)"
            :src="(source.userInformation && source.userInformation.image) || source.userImage || defaultAvatar"
            alt=""
            class="invite-user-img"
          />
          <div class="invite-user-name" @click.stop="agentDetailNew(source)">
            <!-- 张毅 -->
            <!-- {{ source.nikeName ? source.nikeName : "未命名用户" }} -->
            {{ (source.userInformation && source.userInformation.nikeName) || source.nikeName || "未命名用户" }}
          </div>
          <div class="invite-user-location" v-if="source.region">
            <i class="el-icon-location-information"></i>
            <!-- 凤台 -->
            {{ source.region }}
          </div>
        </div>
        <div
          class="invite-user-company"
          v-if="source.enterpriseName"
          @click.stop="companyDetails(item)"
        >
          <!-- 青岛一家你好有限公司 -->
          {{ source.enterpriseName }}
        </div>
      </div>
      <div class="invite-item-right">
        <div
          class="invite-salary"
          :style="!source.fringeBenefits ? 'margin-top:4px;' : ''"
          v-if="source.recruitmentType == 1"
        >
          <!-- 100元/天 -->
          <div></div>
          {{
            source.salaryRange == "面议" ? "面议" : source.salaryRange + "元"
          }}
        </div>
        <div
          class="invite-salary"
          :style="!source.fringeBenefits ? 'margin-top:4px;' : ''"
          v-else
        >
          <!-- 100元/天 -->
          <div>
            {{ source.salaryRange.split(",").join("") }}
          </div>
          <div class="invite-type">
            <!-- 日结 -->
            {{ source.settlementMethod }}
          </div>
        </div>
        <div class="invite-user-mark">
          <div class="marks">
            <!-- 软件工程师 -->
            {{ source.positionCategory }}
            <div class="marks-seperate"></div>
          </div>
          <div class="marks" v-if="source.educationalRequirements">
            <!-- 本科 -->
            {{ source.educationalRequirements.split("/").join("/") }}
            <div class="marks-seperate"></div>
          </div>
          <div class="marks" v-if="source.yearsService">
            {{ source.yearsService }}
            <!-- 3-5年 -->
            <div class="marks-seperate"></div>
          </div>
          <!-- 兼职显示 -->
          <div class="marks" v-if="source.workingHours">
            {{ source.workingHours.split(",").join("-") }}
            <!-- 3-5年 -->
            <div class="marks-seperate"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="invite-bottom" v-if="pb || mode == 'own'">
      <div class="invite-user-post-time-wrap" v-if="mode == 'own'">
        <div class="invite-user-post-time">
          投递时间：1月1日
        </div>
        <div class="invite-user-post-btn">
          简历记录
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String
    },

    source: {
      type: Object,
      default() {
        return {};
      }
    },
    // user 或者 index
    mode: {
      type: String,
      default: "index"
    },
    // 是否带底线
    line: {
      type: Boolean,
      default: false
    },
    // 上边距
    pt: {
      type: String | Number,
      default: 17
    },
    // 下内边距
    pb: {
      type: String | Number,
      default: false
    }
  },

  data() {
    return {
      list: [
        {
          id: 0,
          value: "双休"
        },
        {
          id: 1,
          value: "房补"
        }
      ],
      marks: ["软件工程师", "本科", "3-5年"]
    };
  },
  methods: {
    goCompany() {
      const routeLink = this.$router.resolve({
        path: "/invite/company"
      });
      window.open(routeLink.href, "_self");
      // this.$router
    },
    detail() {
      this.goInviteDetail(
        {
          id: this.source.id
        },
        this.source
      );
    }
  }
};
</script>

<style lang="less" scoped>
.invite-item {
  width: 100%;
  max-width: 1200px;
  padding: 12px;
  box-sizing: border-box;
  opacity: 1;
  border-bottom: 1px solid #f2f2f2;

  .invite-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .invite-bottom {
    padding-bottom: 16px;
  }
  .invite-item-left {
    width: 56%;

    padding-top: 16px;

    display: flex;
    flex-direction: column;
    justify-items: center;
    overflow: hidden;
    .invite-title {
      height: 34px;
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      line-height: 34px;
      padding-bottom: 12px;
      cursor: pointer;
    }
    .tag-list {
      padding-bottom: 20px;
      display: flex;
      overflow: hidden;
      white-space: nowrap;
      .tag-item {
        padding: 0 7px;
        height: 24px;
        line-height: 24px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #999999;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-right: 10px;
      }
    }
    .invite-user {
      display: flex;
      align-items: center;
      .invite-user-img {
        width: 30px;
        height: 30px;
        background: #d9d9d9;
        opacity: 1;
        border-radius: 50%;
        margin-right: 4px;
      }
      .invite-user-name {
        padding-right: 24px;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
        color: #333333;
      }
      .invite-user-location {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        .el-icon-location-information {
          font-size: 16px;
          color: #64b6a8;
        }
      }
    }
    .invite-user-company {
      padding-left: 34px;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
      cursor: pointer;
    }
  }
  .invite-item-right {
    .invite-salary {
      white-space: nowrap;
      height: 45px;
      font-size: 30px;
      // font-weight: 800;
      color: #e00000;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .invite-type {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
      }
    }
    .invite-user-mark {
      margin-top: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      .marks {
        font-size: 16px;
        white-space: nowrap;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        &:last-child {
          .marks-seperate {
            display: none;
          }
        }
        .marks-seperate {
          width: 2px;
          height: 25px;
          opacity: 1;
          background-color: #999999;
          margin: 0 10px;
        }
      }
    }
  }
  .invite-user-post-time-wrap {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .invite-user-post-time {
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
    }
    .invite-user-post-btn {
      text-align: center;
      width: 112px;
      height: 40px;
      border-radius: 4px;
      opacity: 1;
      border: 1px solid #64b6a8;

      text-align: center;
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #64b6a8;
      line-height: 28px;
      cursor: pointer;
    }
  }
}
</style>
